<template>
  <div class="list_box">
    <lang />
    <div class="main_box">

      <!-- 头部 -->
      <div class="header_view">
        <div class="search_view"><Search @getBookList="handlerSearch" /></div>
      </div>

      <div class="data_list_box">
        <!-- 蒙文结果 -->
        <div class="result_filter" v-if="showMnStyle">
          <div class="back_btn" @click="backHomePage()">
            <div class="back_icon_box">
              <img src="../assets/back.svg" alt="">
            </div>
            <span class="back_text">ᠲᠡᠷᠢᠭᠦᠨ ᠨᠢᠭᠤᠷ</span>
          </div>
          <div class="result">
            ᠨᠡᠢᠲᠡ&nbsp;<span class="mainColor number">{{ total }}</span> &nbsp;ᠨᠤᠮ
          </div>
        </div>

        <!-- 中文结果 -->
        <div class="list_header_box" v-else>
          <div class="back_btn" @click="backHomePage()">
            <div class="back_icon_box">
              <img src="../assets/icon-back.svg" alt="">
            </div>
            首页
          </div>
          <div class="result"> 共搜索出 <span class="mainColor fw-600">{{ total }}</span> 本</div>
        </div>

        <!-- 蒙文 -->
        <div class="book_list" v-if="showMnStyle && bookList && bookList.length">
          <div class="book_item" v-for="(item, index) in bookList" :key="index">
            <div class="img_box">
              <img class="img_full" :src="item.images|| def_book" alt="" @click="goToDetail(index)">
            </div>
            <div class="text_box">
              <!-- <div class="mon_title">{{ item.xxx }}</div> -->
              <div class="mn_title fs_22">
                <span class="mainColor fw_600 pr_10">ᠨᠣᠮ᠎ᠤᠨ ᠨᠡᠷ᠎ᠡ : </span>
                《 {{ formatTitle(item.monbook.title) }} 》
              </div>
              <div class="author fs_20 ellipsis">
                <span class="mainColor fw_600 pr_10">ᠵᠣᠬᠢᠶᠠᠭᠴᠢ : </span>
                 {{ formatTitle(item.monbook.author) }}
              </div>
              <div class="publisher fs_20 ellipsis">
                <span class="mainColor fw_600 pr_10">ᠬᠡᠪᠯᠡᠯ᠎ᠦᠨ ᠬᠣᠷᠢᠶ᠎ᠠ : </span>
                <span v-if="item.monbook.publisher == 0"> ᠲᠣᠳᠣ ᠦᠭᠡᠢ </span>
                <span v-else>{{ formatTitle(item.monbook.publisher) }}</span>
              </div>
              <div class="published fs_20 ellipsis">
                <span class="mainColor fw_600 pr_10">ᠬᠡᠪᠯᠡᠭᠰᠡᠨ ᠡᠳᠦᠷ ᠬᠤᠭᠤᠴᠠᠭ᠎ᠠ : </span>
                {{ (item.published).replace(/\u202f/g, '\u180e').replace(/\u180B/g, '').replace(/\u200c/g, '').replace(/\u200D/g, ' ') }}
              </div>
            </div>

            <div class="btn_box">
              <el-button class="read_btn" type="default" @click="goToDetail(index)">ᠤᠩᠱᠢᠬᠤ</el-button>
            </div>
          </div>
        </div>

        <!-- 中文 -->
        <div class="book_list_zh" v-if="!showMnStyle && bookList && bookList.length">
          <div class="book_item_zh pv_10" v-for="(item, index) in bookList" :key="index">
            <div class="img_box_zh">
              <img :src="bookList[index].img || def_book" alt="" @click="goToBookDetal(index)">
            </div>
            <div class="text_box_zh" @click="goToBookDetal(index)">
              <div class="zh_title w_100 min_w_300 ellipsis"><span class="mainColor fw_600 pr_10">书名:</span>《{{ item.title }}》</div>
              <div class="author w_100 min_w_300 ellipsis"><span class="mainColor fw_600 pr_10">作者:</span>{{ item.authors }}</div>
              <div class="publisher w_100 min_w_300 ellipsis"><span class="mainColor fw_600 pr_10">出版社:</span>{{ item.publisher }}</div>
              <div class="published w_100 min_w_300 ellipsis"><span class="mainColor fw_600 pr_10">出版日期:</span>{{ item.published }}</div>
            </div>

            <!-- 浏览按钮 -->
            <el-button class="btn" type="default" @click="goToZhBookDetal(index)">阅读</el-button>
          </div>
        </div>

        <div class="pagenation">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="20"
            font-size="20px !important"
            @current-change="handlerChangeCurrentPage"
            @prev-click="handlerPrevClick"
            @next-click="handlerNextClick"
          >
          </el-pagination>
        </div>

        <!-- loading 动画 -->
        <div v-if="isShow" class="loading_box">
          <div class="loading">
            <spinner />
          </div>
        </div>
      </div>

    </div>  
  </div>
</template>

<script>
  import lang from '../components/lang.vue';
  import Search from '../components/search.vue';

  import Spinner from 'vue-simple-spinner'

  export default {
    name: "BookList",
    components: { lang, Search, Spinner },
    data() {
      return {
        total: 0,
        pageTotal: 0,
        bookList: [],
        currentPage: 1,

        timer: null,
        isShow: false,

        activeListIndex: null,
        def_book: require('../assets/def-book.png'),
        showMnStyle: true
      }
    },

    computed: {
      getStateSearchVal() {
        this.searchVal = this.$store.state.searchVal
      },
      getStateActiveIndex() {
        this.activeListIndex = this.$store.state.activeIndex
      },
      getStateMnStyle() {
        this.showMnStyle = this.$store.state.isShowMnStyle
      },
    },

    created() {
      this.getStateSearchVal
      this.getStateActiveIndex
      this.getStateMnStyle
    },

    mounted(){
      this.getBookList()
    },

    methods: {
      // 跳转到首页
      backHomePage() {
        this.$router.push('/')
      },
      // 获取全部数据
      async getBookList() {
        this.getStateMnStyle
        this.bookList = []
        this.total = 0
        let that = this
        let query = this.$route.query
        let res = null
        this.isShow = true

        // 判断 响应数据
        this.timer = setTimeout(() => {
          that.$message('求情失败，服务器发生错误！');
          that.isShow = false
        }, 3000)

        // ----------- local ------------
        if (this.activeListIndex == 1) {
          res = await this.axios.get(`api/bookrec/api/v1/books/?search=${query.search}&limit=20&is_mon=${query.isMon}`)
        } else if (this.activeListIndex == 2) {
          res = await this.axios.get(`api/bookrec/api/v1/books/?is_mon=${query.isMon}&limit=20&isbn=${query.isbn}`)
        } else if (this.activeListIndex == 3) {
          res = await this.axios.get(`api/bookrec/api/v1/books/?is_mon=${query.isMon}&limit=20&authors_m=${query.authors}`)
        } else if (this.activeListIndex == 4) {
          res = await this.axios.get(`api/bookrec/api/v1/books/?is_mon=${query.isMon}&limit=20&publisher_m=${query.publisher}`)
        }

        // ----------- server -----------
        // if (this.activeListIndex == 1) {
        //   res = await this.axios.get(`/bookrec/api/v1/books/?search=${query.search}&limit=20&is_mon=${query.isMon}`)
        // } else if (this.activeListIndex == 2) {
        //   res = await this.axios.get(`/bookrec/api/v1/books/?is_mon=${query.isMon}&limit=20&isbn=${query.isbn}`)
        // } else if (this.activeListIndex == 3) {
        //   res = await this.axios.get(`/bookrec/api/v1/books/?is_mon=${query.isMon}&limit=20&authors_m=${query.authors}`)
        // } else if (this.activeListIndex == 4) {
        //   res = await this.axios.get(`/bookrec/api/v1/books/?is_mon=${query.isMon}&limit=20&publisher_m=${query.publisher}`)
        // }

        if (res.data.code == 200) {
          var result = res.data.data.results
          this.total = res.data.data.count
          // this.isShow = false
        } 
        
        if (!result) {
          clearTimeout(that.timer)
          this.isShow = false
          this.$message('暂无该类图书信息！');
          return false
        }

        clearTimeout(that.timer)
        this.isShow = false
        this.bookList = result
      },

      // 监听搜索
      handlerSearch(query) {
        let newUrl = null
        this.getStateActiveIndex

        // ----------- local ----------
        if (this.activeListIndex == 1) {
          newUrl = this.$route.path + `?is_mon=${query.isMon}&search=${query.search}`
        } else if (this.activeListIndex == 2) {
          newUrl = this.$route.path + `?is_mon=${query.isMon}&isbn=${query.isbn}`
        } else if (this.activeListIndex == 3) {
          newUrl = this.$route.path + `?is_mon=${query.isMon}&authors_m=${query.authors}`
        } else if (this.activeListIndex == 4) {
          newUrl = this.$route.path + `?is_mon=${query.isMon}&publisher_m=${query.publisher}`
        }

        // ---------- server ----------
        // if (this.activeListIndex == 1) {
        //   newUrl = 'http://10.60.63.131/lib/mon/#/' + `?search=${query.search}`
        // } else if (this.activeListIndex == 2) {
        //   newUrl = 'http://10.60.63.131/lib/mon/#/' + `?isbn=${query.isbn}`
        // } else if (this.activeListIndex == 3) {
        //   newUrl = 'http://10.60.63.131/lib/mon/#/' + `?authors=${query.authors}`
        // } else if (this.activeListIndex == 4) {
        //   newUrl = 'http://10.60.63.131/lib/mon/#/' + `?publisher=${query.publisher}`
        // }

        window.history.replaceState('', '', newUrl)      
        this.getBookList()
      },

      // 格式化 title
      formatTitle(val) {
        let arr = []
        let value = val.replace(/\u202f/g, '\u180e').replace(/\u180B/g, '').replace(/\u200c/g, '').replace(/\u200D/g, ' ')

        // 将 内容中的 标点符号 替换为 " "
        let str = value.replace(/[|\《|\》|\·|\(|\)|\︔|\᠄|\᠂|\<|\᠃|\︖]/g, "");
        // 将 内容 转换为 数组 ， 每一个 蒙文字 是一个 元素

        for (let i of str) {
          if (i === " ") {
            arr = str.split(" ")
          }
        }

        if (arr.length == 0 && str.length !== 0) {
          return str
        }

        if ( arr.length > 0 ) {
          return arr.slice(0, 8).join(' ')
        }
      },

      // 前往详情
      goToDetail(index) {
        this.$router.push({
          path: '/book-detail-mn',
          query: {
            id: this.bookList[index].id
          }
        })
      },

      // 前往中文详情
      goToZhBookDetal(index) {
        this.$router.push({
          path: '/book-detail-zh',
          query: {
            id: this.bookList[index].id
          }
        })
      },

      // 分页
      async handlerChangeCurrentPage(e) {
        this.currentPage = e
        this.isShow = true
        let that = this
        let query = this.$route.query
        // this.bookList = []

        this.getStateActiveIndex

        let res = null
        if (this.activeListIndex == 1) {
          res = await this.axios.get(`/bookrec/api/v1/books/?search=${query.search}&is_mon=${query.isMon}&limit=20&offset=${e - 1}0`)
        } else if (this.activeListIndex == 2) {
          res = await this.axios.get(`/bookrec/api/v1/books/?is_mon=${query.isMon}&isbn=${query.isbn}&limit=20&offset=${e - 1}0`)
        } else if (this.activeListIndex == 3) {
          res = await this.axios.get(`/bookrec/api/v1/books/?is_mon=${query.isMon}&authors_m=${query.authors}&limit=20&offset=${e - 1}0`)
        } else if (this.activeListIndex == 4) {
          res = await this.axios.get(`/bookrec/api/v1/books/?is_mon=${query.isMon}&publisher_m=${query.publisher}&limit=20&offset=${e - 1}0`)
        }

        if (res.data.code == 200) {
          setTimeout(() => {
            this.isShow = false
            that.bookList = res.data.data.results
          }, 500)
        }
      },

      // 上一个
      async handlerPrevClick() {
        let currentPage = this.currentPage --
        this.isShow = true
        let that = this
        let query = this.$route.query
        // this.bookList = []

        let res = null
        if (this.activeListIndex == 1) {
          res = await this.axios.get(`/bookrec/api/v1/books/?search=${query.search}&is_mon=${query.isMon}&limit=20&offset=${currentPage - 1}0`)
        } else if (this.activeListIndex == 2) {
          res = await this.axios.get(`/bookrec/api/v1/books/?is_mon=${query.isMon}&isbn=${query.isbn}&limit=20&offset=${currentPage - 1}0`)
        } else if (this.activeListIndex == 3) {
          res = await this.axios.get(`/bookrec/api/v1/books/?is_mon=${query.isMon}&authors_m=${query.authors}&limit=20&offset=${currentPage - 1}0`)
        } else if (this.activeListIndex == 4) {
          res = await this.axios.get(`/bookrec/api/v1/books/?is_mon=${query.isMon}&publisher_m=${query.publisher}&limit=20&offset=${currentPage - 1}0`)
        }
        if (res.data.code == 200) {
          setTimeout(() => {
            this.isShow = false
            that.bookList = res.data.data.results
          }, 500)
        }
      },    

      // 下一个
      async handlerNextClick() {
        let currentPage = this.currentPage ++
        this.isShow = true
        let that = this
        let query = this.$route.query
        // this.bookList.length = 0

        this.getStateActiveIndex

        let res = null
        // this.getDataByParams(query, currentPage)
        
        if (this.activeListIndex == 1) {
          res = await this.axios.get(`/bookrec/api/v1/books/?search=${query.search}&is_mon=${query.isMon}&limit=20&offset=${currentPage - 1}0`)
        } else if (this.activeListIndex == 2) {
          res = await this.axios.get(`/bookrec/api/v1/books/?is_mon=${query.isMon}&isbn=${query.isbn}&limit=20&offset=${currentPage - 1}0`)
        } else if (this.activeListIndex == 3) {
          res = await this.axios.get(`/bookrec/api/v1/books/?is_mon=${query.isMon}&authors_m=${query.authors}&limit=20&offset=${currentPage - 1}0`)
        } else if (this.activeListIndex == 4) {
          res = await this.axios.get(`/bookrec/api/v1/books/?is_mon=${query.isMon}&publisher_m=${query.publisher}&limit=20&offset=${currentPage - 1}0`)
        }

        if (res.data.code == 200) {
          setTimeout(() => {
            this.isShow = false
            that.bookList = res.data.data.results
          }, 500)
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .list_box {
    width: 95%;
    height: 100vh;
    margin: 0 auto;
    .main_box {
      width: 100%;
      height: 900px;
      overflow: hidden;
      // border: 1px solid #000;
   
      .header_view {
        height: 700px;
        float: left;
        margin-top: 100px;
        // border: 1px solid #000;
      }  
    
      .data_list_box {
        height: 85%;
        margin-top: 100px;
        position: relative;
        // border: 1px solid red;
        overflow: hidden;

        .result_filter {
          width: 50px;
          height: 700px;
          position: relative;
          margin-left: 10px;
          // border: 1px solid #000;

          .back_btn {
            width: 40px;
            margin-left: 5px;
            margin-top: 10px;
            border: 1px solid #74a5ff;
            border-radius: 5px;
            text-align: center;
            .back_icon_box {
              width: 30px;
              height: 30px;
              img { width: 100%; height: 100%; }
            }
            .back_text {
              font-size: 20px;
              writing-mode: vertical-lr;
              font-family: "gltTing";
              color: #74a5ff;
            }
          }
          &:hover { cursor: pointer; }

          .result {
            width: 40px;
            // height: 400px;
            margin-top: 10px;
            margin-left: 5px;
            display: flex;
            align-items: center;
            font-size: 26px;
            writing-mode: vertical-lr;
            font-family: "gltTing";
            // border: 1px solid #000;


            .number {
              font-size: 18px;
              transform-origin: 20 0;
              transform: rotate(-90deg);
              -webkit-transform: rotate(-90deg);
              -moz-transform: rotate(-90deg);
            }
          }
        }  

        .list_header_box {
          width: 90%;
          height: 45px;
          line-height: 40px;
          position: sticky;
          top: 0;
          z-index: 99;
          background-color: #fff;

          .back_btn {
            width: 75px;
            height: 30px;
            line-height: 30px;
            padding: 0 5px;
            margin-left: 8px;
            color: #74a5ff;
            // background-color: #74a5ff;
            border: 1px solid #74a5ff;
            border-radius: 5px;
            margin-top: 10px;
            border-radius: 5px;
            float: left;
            position: relative;

            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;

            .back_icon_box { 
              width: 25px; 
              height: 30px;
              // background-color: #fff;

              img { width: 100%; height: 100%; }
            }
          }
          &:hover { 
            cursor: pointer; 
          }
          .result { 
            margin-left: 20px;
            float: left;
            padding: 5px 0 0 0;
          }
        }  

        .book_list {
          width: calc(100% - 120px);
          height: 760px;
          overflow: auto;
          
          display: flex;
          flex-direction: row;
          justify-content:flex-start;
          // border: 1px solid #000;

          position: absolute;
          top: 0;
          left: 40px;

          .book_item {
            height: 100%;
            padding: 10px;
            float: left;
            position: relative;
            // border-left: 1px solid #ccc;
          
            .img_box { 
              width: 100px;
              height: 120px;
            }
            .img_box:hover { cursor: pointer; }

            .text_box {
              width: 100%;
              height: 600px;
              padding-top: 5px;

              display: flex;
              flex-direction: row;
              justify-content: space-around;

              .mn_title, .author, .publisher, .published {
                width: 25px;
                height: 80%;
                writing-mode: vertical-lr;
                font-family: "gltTig";
                font-size: 18px;
              }
            }
            .btn_box {
              position: absolute;
              left: 50%;
              bottom: 20px;
              transform: translateX(-50%);

              .read_btn {
                width: 80px;
                height: 50px;
                border: 1px solid #ccc;
                color: #ccc;

                // transform-origin: 0 0;
                transform: rotate(90deg);
              
                font-family: "gltTig";
              }

              .read_btn:hover {
                cursor: pointer;
                border: 1px solid #74a5ff !important;
                background-color: #fff;
                color: #74a5ff !important;
              }
            }
          }
        }
      
        .loading_box {
          width: 200px;
          height: 200px;
          line-height: 200px;
          position: absolute;
          top: 50%;
          left: 44%;
          transform: translate(-50%, -50%);
          text-align: center;
          
          .loading {
            font-size: 100px;
            color: #ccc;
            .loading_icon { color: #74a5ff !important; }
          }
        }
      }

      // 中文列表样式
      .book_list_zh {
        width: 94%;
        height: 800px;
        overflow: auto;

        .book_item_zh {
          width: 100%;
          overflow: hidden;
          border-bottom: 1px solid #ccc;
          position: relative;

          .img_box_zh { 
            float: left;
            img { width: 100%; height: 100%; }
          }
          .img_box:hover {
            cursor: pointer;
          }

          .text_box_zh {
            width: calc(100% - 200px);
            height: 120px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            // align-items: center;
            float: left;
            padding-left: 20px;
            .zh_title {
              width: 100%;
            }
            .author {
              width: 100%;
            }
          }

          .btn {
            position: absolute;
            right: 20px;
            bottom: 20px;
            border: 1px solid #ccc;
            color: #ccc;
          }
          .btn:hover {
            border: 1px solid #74a5ff;
            color: #74a5ff;
          }
        }
      }
      .book_list_zh::-webkit-scrollbar {
        width: 2px;
        height: 100%;
        background-color: #f5f5f5;
      }
      .book_list_zh::-webkit-scrollbar-thumb {       
        border-radius: 10px;
        background: #74a5ff;
      }

      .pagenation {
        width: 40px;
        float: right;
        position: absolute;
        top: 0;
        right: 10px;
      }
    }  
  } 
</style>

<style>
  .el-pager {
    display: flex;
    flex-direction: column;
  }

  .el-pager > li{
    width: 25px;
    height: 28px;
    margin: 10px 0 10px 5px !important;
  } 
  .el-pager > li:not(.disabled).active {
    background-color: #74a5ff !important;
  }
  .btn-prev, .btn-next { 
    transform-origin: 20 0 !important;
    transform: rotate(90deg) !important;
  }

  @media screen and (min-width: 1800px) {
    .book_list { margin-left: 15px !important; }
    .img_box_zh { width: 110px; height: 120px; }
  } 

  @media screen and (min-width: 1600px) and (max-width: 1799px) {
    .header_view { width: 200px;}
    .book_list { margin-left: 20px !important; }
    .img_box_zh { width: 110px; height: 120px; }
  } 

  @media screen and (min-width: 1400px) and (max-width: 1599px) {
    .header_view { width: 220px; }
    .data_list_box { margin-left: 30px !important; }
    .book_list { left: 60px !important; }
    .img_box_zh { width: 110px; height: 120px; }
  } 

  @media screen and (min-width: 1200px) and (max-width: 1399px) {
    .header_view { width: 210px; }
    .data_list_box { margin-left: 45px !important; }
    .book_list { left: 60px !important; }
    .img_box_zh { width: 110px; height: 120px; }
  } 

  @media screen and (min-width: 1000px) and (max-width: 1199px) {
    .header_view { width: 180px; }
    .result_filter { margin-left: 20px !important; }
    .book_list { left: 70px !important; }
    .img_box_zh { width: 110px; height: 120px; }
    .list_header_box { margin-left: 20px; }
    .book_list_zh { width: 90% !important; margin-left: 20px !important; }
  } 
  
  @media screen and (min-width: 992px) and (max-width: 999px) {
    .header_view { width: 170px; }
    .list_header_box { margin-left: 10px; }
    .data_list_box { margin-left: 175px !important; }
    .book_list { left: 60px !important; }
    .book_list_zh { width: 90% !important; margin-left: 10px !important; }
    .img_box_zh { width: 110px; height: 120px; }
  } 
</style>
